<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title th:text="${blog.title}"></title>
    <meta name="referrer" content="no-referrer"/>
    <link th:href="@{/css/bootstrap-3.3.7-dist/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap-3.3.7-dist/css/bootstrap-theme.css}" rel="stylesheet">
    <link th:href="@{/css/blog.css}" rel="stylesheet">
    <link th:href="@{/css/indexblog.css}" rel="stylesheet">
    <link th:href="@{/css/typo.css}" rel="stylesheet">
    <link th:href="@{/lib/prism/prism.css}" rel="stylesheet">
    <link th:href="@{/lib/tocbot/tocbot.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/js/jquery-3.0.0.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-3.0.0.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.scrollTo.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.scrollTo.min.js}"></script>
    <script type="text/javascript" th:src="@{/css/bootstrap-3.3.7-dist/js/bootstrap.js}"></script>
    <script type="text/javascript" th:src="@{/css/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
<!--    <script type="text/javascript" th:src="@{/css/bootstrap-3.3.7-dist/js/npm.js}"></script>-->
    <script type="text/javascript" th:src="@{/lib/prism/prism.js}"></script>
    <script type="text/javascript" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
    <script type="text/javascript" th:src="@{/lib/qrcode/qrcode.min.js}"></script>
    <script type="text/javascript" th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
    <style type="text/css">

    </style>
</head>
<body style="background-color: #F2F2F2">
<!--页头-->
<div th:replace="head/blog::header"></div>
<!--内容-->
<div id="waypoint">
    <div class="container">
        <div class="panel panel-success">
            <div class="panel-heading">
<!--                头部-->
                <span class="panel-title">
                    <img th:src="@{${blog.user.avatar}}"  class="img-circle" style="height: 24px;width: 24px;">&nbsp;&nbsp;&nbsp;
                    <a th:text="${blog.user.nickname}">烈焰</a>&nbsp;&nbsp;&nbsp;
                    更新于：<span class="text-muted" th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}"></span>&nbsp;&nbsp;&nbsp;
                    浏览：<span class="text-muted" th:text="${blog.views}"></span>次
                </span>
                <span class="panel-title" style="float: right">
                     <a>博客</a>  /  <a>正文</a>
                </span>
            </div>

            <div class="panel-body">
<!--                内容-->
                <h3 style="text-align: center">
                    <span th:text="${blog.title}"></span>
                    <span class="label label-danger" th:text="${blog.flag}"></span>
                </h3><br>

                <div id="content" class="typo typo-selection  js-toc-content m-padded-lr m-text" th:utext="${blog.content}">
                </div>
            </div>
            <div class="panel-body">
                <!--                图片-->
                <img src="../image/me.jpg" th:src="@{${blog.firstPicture}}" class="img-rounded m-padded-lr"/>
            </div>
            <div class="panel-body">
                <!--                标签-->
                <div class="m-padded-lr" style="padding-top: 15px">
                    <span class="label label-danger" th:text="${blog.tag.name}"></span>
                </div>
                <!--                赞赏-->
                <div style="text-align: center" th:if="${blog.appreciation}">
                    <button type="button" class="btn btn-warning" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="bottom"
                           >赞赏</button>
                </div>
            </div>
            <div class="panel-body" style="background-color: #E0F8F7" th:if="${blog.shareStatement}">
<!--                博客信息-->
                <div class="row">
                    <div class="col-md-8">
                        <ul>
                            <li>作者：<span th:text="${blog.user.nickname}"></span><a th:href="@{/head/about}" target="_blank">（联系作者）</a></li>
                            <li>发表时间：<span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}"></span></li>
                            <li>版权声明：<span>归博主所以</span></li>
                            <li>公众号：<span>右边为微信</span></li>
                        </ul>
                    </div>
                    <div class="col-md-4" >
                        <img src="../image/me2.jpg" th:src="@{/image/2630208719.png}" style="height: 100px;width: 100px;float: right">
                    </div>
                </div>
            </div>
            <div class="panel-body" th:if="${blog.commentabled}">
<!--                留言-->
                <div style="border-bottom: 2px solid silver">
                    <h4 style="text-align: center">评论</h4>
                </div>
                <div id="comment-container">
                    <div th:fragment="commentList"><br>
                        <ul class="media-list">
                            <!--                    第一类评论-->
                            <li class="media m-border-p" th:each="comment : ${comments}">
                                <div class="media-left">
                                    <a href="#">
                                        <img class="media-object" th:src="@{${comment.avatar}}" style="height: 50px;width:50px;">
                                    </a>
                                </div>
                                <div class="media-body">
                                    <h4 class="media-heading">
                                        <a class="m-a">
                                            <span th:text="${comment.nickname}">Matt</span>
                                            <span class="label label-info" th:if="${comment.adminComment}">博主</span>
                                        </a>
                                        &nbsp;&nbsp;<small th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}"></small>
                                    </h4>
                                    <span class="m-text" th:text="${comment.content}"></span>
                                    &nbsp;&nbsp;<a data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}" onclick="reply(this)">回复</a>
                                    &nbsp;&nbsp;<a><span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span></a>
                                    <div th:if="${#arrays.length(comment.replyComments)}>0">
<!--                                        第二评论-->
                                        <ul class="media-list">
                                            <li class="media" th:each="reply : ${comment.replyComments}">
                                                <div class="media-left">
                                                    <a href="#">
                                                        <img class="media-object" th:src="@{${reply.avatar}}" style="height: 50px;width:50px;">
                                                    </a>
                                                </div>
                                                <div class="media-body">
                                                    <h4 class="media-heading">
                                                        <a class="m-a">
                                                            <span style="color: black" th:text="${reply.nickname}">Matt</span>
                                                            <span class="label label-info" th:if="${reply.adminComment}">博主</span>
                                                            <span th:text="|@${reply.parentComment.nickname}|" style="color: dodgerblue">@小白</span>
                                                        </a>
                                                        &nbsp;&nbsp;<small th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}"></small>
                                                    </h4>
                                                    <span class="m-text" th:text="${reply.content}"></span>
                                                    &nbsp;&nbsp;<a data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}" onclick="reply(this)">回复</a>
                                                    &nbsp;&nbsp;<a><span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span></a>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div><br>
                <div>

                    <form id="form">
                        <div>
                            <input type="hidden" name="blog.id" th:value="${blog.id}">
                        </div>
                        <div>
                            <input type="hidden" name="parentComment.id" value="-1">
                        </div>
                        <div>
                            <textarea class="form-control" id="comment" name="content" rows="3" placeholder="请输入你的评论..."></textarea>
                        </div>
                        <div class="form-inline" style="padding-top: 15px">
                            <div class="form-group">
                                <label for="nickname">
                                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                                </label>
                                <input type="text" name="nickname" class="form-control" id="nickname" placeholder="姓名" th:value="${session.user}!=null ? ${session.user.nickname}">
                            </div>&nbsp;&nbsp;&nbsp;
                            <div class="form-group">
                                <label for="email">
                                    <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
                                </label>
                                <input type="email" name="email" class="form-control" id="email" placeholder="jane.doe@example.com" th:value="${session.user}!=null ? ${session.user.email}">
                            </div>&nbsp;&nbsp;&nbsp;
                            <button id="commentpost-btn" type="button" class="btn btn-info">发布</button>
                        </div>
                    </form><br>
                </div>
            </div>
<!--            <div class="panel-footer">-->
<!--                <nav aria-label="Page navigation">-->
<!--                    <ul class="pager">-->
<!--                        <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>-->
<!--                        <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>-->
<!--                    </ul>-->
<!--                </nav>-->
<!--            </div>-->
        </div>
    </div>
<!--    侧边栏-->
    <div id="toolbar" class="m-padded m-fixed m-right-bottom" style="display: none">
        <div class="btn-group-vertical " role="group" aria-label="...">
            <button type="button" class="btn btn-info" id="catalog">目录</button>
            <a id="message1" class="btn btn-info" href="#" role="button">留言</a>
            <button type="button" class="btn btn-default" id="wxlogin">
                <img th:src="@{/image/weixin2.png}" style="width: 20px;height: 20px;">
            </button>
            <button id="toTop-buttom" type="button" class="btn btn-default"><span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span></button>
        </div>
    </div>
<!--    目录-->
    <div class="m-toc m-fixed well well-sm" id="showcatalog" style="display: none">
        <h5 style="color: blue;text-align: center">目录</h5>
        <ol class="js-toc"></ol>
    </div>
<!--    二维码生成-->
    <div class="m-qrcode m-fixed img-thumbnail" id="qrcode" style="display: none">
    </div>

</div>

<!--页尾-->
<div th:replace="head/blog::footer"></div>

<script type="text/javascript" th:inline="javascript">
    // 赞赏
    $(function (){
        $("[data-toggle='popover']").popover({
            animation:true,//淡入淡出
            html:true,//content中插入html代码
            container:"body",
            content:"<img src='/image/zanshang.png' style='width: 150px;height: 150px;margin: 0 auto'>&nbsp;&nbsp;"//插入图片的路径 及 样式
        });
    });

    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })

    $('#myStateButton').on('click', function () {
        $(this).button('complete') // button text will be "finished!"
    })

// 目录
    tocbot.init({
        // 在哪里呈现目录。
        tocSelector: '.js-toc',
        // 在哪里获取标题来构建目录。
        contentSelector: '.js-toc-content',
        // 在contentSelector元素中获取哪些标题。
        headingSelector: 'h1, h2, h3',
        // 用于content.l中相对定位或绝对定位容器内的标题
        hasInnerContainers: true,
    });
    $(document).ready(function(){
        $("#catalog").click(function(){
            $("#showcatalog").toggle();
        });
    });


    // 二维码生成
    var serurl = /*[[#{blog.serurl}]]*/"172.0.0.1:8080";
    var url = /*[[@{/head/blog/{id}(id=${blog.id})}]]*/"";
    var qrcode = new QRCode("qrcode", {
        text: serurl+url,
        width: 128,
        height: 128,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });


    $("#wxlogin").mousemove(function(){
        $("#qrcode").show()
    })

    $("#wxlogin").mouseleave(function(){
        $("#qrcode").hide()
    })

    // 滚动
    $("#toTop-buttom").click(function () {
        $(window).scrollTo(0,1000)
    })
    // 滚动侦测
    var waypoint = new Waypoint({
        element: document.getElementById('waypoint'),
        handler: function(direction) {
            if(direction == 'down'){
                $('#toolbar').show(500)
            }else {
                $('#toolbar').hide(500)
            }
        }
    })


    var $content = $("#comment")
    var $nickname = $("#nickname")
    var $email = $("#email")
    $(document).ready(function () {
        $("#form").submit(function () {
            if (content() && nickname() && email()){
                return true
            }else {
                return false
            }
        })
    })

    function content() {
        if ($content.val() == ""){
            window.alert("评论不能为空")
            return false
        }
        return true
    }
    function nickname() {
        if ($nickname.val() == ""){
            window.alert("姓名不能为空")
            return false
        }
        return true
    }
    function email() {
        if ($email.val() == ""){
            window.alert("邮箱不能为空")
            return false
        }
        return true
    }
    $(function () {
        $("#comment-container").load(/*[[@{/comments/{id}(id=${blog.id})}]]*/"comment/6");
    })

    $("#commentpost-btn").click(function () {
        var boo = $("#form").submit();
        postDate()
        // if (boo){
        //     console.log("提交成功")
        // }else {
        //     console.log("提交失败")
        // }
    })

    // 评论
    function postDate() {
        $("#comment-container").load(/*[[@{/comments}]]*/"",{
            "parentComment.id": $("[name='parentComment.id']").val(),
            "blog.id" : $("[name='blog.id']").val(),
            "nickname" : $("[name='nickname']").val(),
            "email" : $("[name='email']").val(),
            "content" : $("[name='content']").val()
        },function (responseTxt,statusTxt,xhr) {
            // $(window).scrollTo($("#comment-container"),500)
            clearContent()
        })
    }
    
    function clearContent() {
        $("[name='content']").val('')
        $("[name='parentComment.id']").val(-1)
        $("[name='content']").attr("placeholder","请输入评论信息...")
    }

    function reply(obj) {
        var commentId = $(obj).data('commentid')
        var commentNickname = $(obj).data('commentnickname')
        $("[name='content']").attr("placeholder","@"+commentNickname).focus()
        $("[name='parentComment.id']").val(commentId)
        $(window).scrollTo($("#form"),500)
    }

    $("#message1").click(function () {
        $(window).scrollTo($("#form"),500)
    })
</script>

<script type="text/javascript">
    $("#newBlog-container").load(/*[[@{/footer/newBlog}]]*/"/footer/newBlog")
</script>
</body>
</html>